﻿@{
    ViewBag.Title = "OwnSlider";
}
<h2>
    OwnSlider</h2>
@*jQuery Touchwipe Plugin http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
oder http://archive.plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture*@
    <link href="@Url.Content("~/Content/jqueryTouchSlider.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.carousel.touch.slider.squadwuschel.1.0.2.js")" type="text/javascript"></script>
@*<script src="@Url.Content("~/Scripts/jquery.touchwipe.1.1.1.js")" type="text/javascript"></script>*@
<script src="@Url.Content("~/Scripts/jquery.cj-swipe.js")" type="text/javascript"></script>

<a class="SlideBack" style="display: none" href="prev">Zurück</a>
<a class="SlideNext" style="display: none" href="next">Nächstes</a>
<a class="SlidePlay" style="display: none" href="play">Start/Play</a>
<br />
<br />
<div class="mainSlider">
    <ul class="slider">
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img1.gif" />
                <div>
                    <span>FIRST Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                        ligula eget dolor. Aenean massa. Cum sociis naonec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
                        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
                        venenatis vitae, justo. Nullam dictum felis eu pede mollis </span>
                </div>
            </div>
        </li>
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img2.gif" />
                <div>
                    <span>SECOND Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                        ligula eget dolor. Aende justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                        In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
                        eu pede mollis </span>
                </div>
            </div>
        </li>
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img3.gif" />
                <ul>
                    <li>Check 1</li>
                    <li>Check 2</li>
                    <li>Check 3</li>
                </ul>
                <div>
                    ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                    Aende justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
                    ut, imperdiet a, venenatis vitae
                </div>
            </div>
        </li>
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img4.gif" />
                <div>
                    <span>VORLETZTER Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
                        eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
                        montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
                        pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
                        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
                        venenatis vitae, justo. Nullam dictum felis eu pede mollis </span>
                </div>
            </div>
        </li>
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img1.gif" />
                <div>
                    LAST ITEM
                </div>
            </div>
        </li>
    </ul>
</div>

<br/>
<br/>
<br/>
<br/>
<br/>

<a class="SlideBack2" style="display: none" href="prev">Zurück</a>
<a class="SlideNext2" style="display: none" href="next">Nächstes</a>
<a class="SlidePlay2" style="display: none" href="play">Start/Play</a>
<br />
<br />
<div class="mainSlider2">
    <ul class="slider">
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img1.gif" />
                <div>
                    <span>FIRST Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                        ligula eget dolor. Aenean massa. Cum sociis naonec quam felis, ultricies nec, pellentesque
                        eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
                        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
                        venenatis vitae, justo. Nullam dictum felis eu pede mollis </span>
                </div>
            </div>
        </li>
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img2.gif" />
                <div>
                    <span>SECOND Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
                        ligula eget dolor. Aende justo, fringilla vel, aliquet nec, vulputate eget, arcu.
                        In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis
                        eu pede mollis </span>
                </div>
            </div>
        </li>
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img3.gif" />
                <ul>
                    <li>Check 1</li>
                    <li>Check 2</li>
                    <li>Check 3</li>
                </ul>
                <div>
                   1 ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                    Aende justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
                    ut, imperdiet a, venenatis vitae
                </div>
            </div>
        </li>
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img3.gif" />
                <ul>
                    <li>Check 1</li>
                    <li>Check 2</li>
                    <li>Check 3</li>
                </ul>
                <div>
                  2  ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                    Aende justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
                    ut, imperdiet a, venenatis vitae
                </div>
            </div>
        </li>
          <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img3.gif" />
                <ul>
                    <li>Check 1</li>
                    <li>Check 2</li>
                    <li>Check 3</li>
                </ul>
                <div>
                  3  ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                    Aende justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus
                    ut, imperdiet a, venenatis vitae
                </div>
            </div>
        </li>
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img4.gif" />
                <div>
                    <span>VORLETZTER Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
                        eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
                        montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
                        pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
                        vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
                        venenatis vitae, justo. Nullam dictum felis eu pede mollis </span>
                </div>
            </div>
        </li>
        <li>
            <div class="slItem">
                <img alt="IMG1" src="../img/img1.gif" />
                <div>
                    LAST ITEM
                </div>
            </div>
        </li>
    </ul>
</div>

<script>
   

    $(document).ready(function () {
      //Zwei Slider auf einer Seite verwenden
        $('.mainSlider').swSlider();
        $('.mainSlider2').swSlider({
            nextItemClass: 'SlideNext2', //Die Klasse für den NextLink/Button
            backItemClass: 'SlideBack2', //Die Klasse für den BackLink/Button
            playItemClass: 'SlidePlay2'  //Die Klasse für den Play Button
        });
    });
    
</script>
